<template>
	<!-- 头部使用说明部分-->
	<view class="header">
		<view class="header_left">
			<text></text>
		</view>
		<view class="header_licheng">
			<text>我的里程</text>
		</view>
		<view class="header_use">
			<navigator url="./instructions"><text>使用说明</text></navigator>
		</view>
	</view>
	<!-- 中部数据部分 -->
	<view class="content_top">
		<text>类型</text>
		<text>累计</text>
		<text>当前可用</text>
	</view>
	<view class="content_top">
		<text>徒步</text>
		<text>300</text>
		<text>200</text>
	</view>
	<view class="content_top">
		<text>自驾</text>
		<text>300</text>
		<text>200</text>
	</view>
	<view class="content_top">
		<text>骑行</text>
		<text>300</text>
		<text>200</text>
	</view>
	<view class="content_top">
		<text>登山</text>
		<text>300</text>
		<text>200</text>
	</view>
	<!-- 尾部切换部分 -->
	<view class="content_bot">
	<view>
		<view class="inv-h-w">
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">使用记录</view>
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">获取记录</view>
		</view>
		<view class="" v-show="Inv == 0">
			   <view class="bottom">
			     <view class="one">
			     	<view>
			     		<text>10公里徒步里程抵扣100元</text>
			     		<text>2018.12.02</text>
			     	</view>
			     	<text class="money">-10</text>
			     </view>
				 <view class="two">
				 	<view>
				 		<text>10公里徒步里程抵扣100元</text>
				 		<text>2018.12.02</text>
				 	</view>
				 	<text class="money">-100</text>
				 </view>
				 <view class="three">
				 	<view>
				 		<text>10公里徒步里程抵扣200元</text>
				 		<text>2018.12.02</text>
				 	</view>
				 	<text class="money">-1000</text>
				 </view>
			   </view>
		</view>
		<view class="" v-show="Inv == 1">
				<view class="bot">
				  <view class="four">
				  	<view>
				  		<text>徒步行程上传，轨迹号1873847</text>
				  		<text>2018.12.02</text>
				  	</view>
				  	<text class="money">+100</text>
				  </view>
				 <view class="five">
					<view>
						<text>登山行程上传，轨迹号2839459</text>
						<text>2018.12.02</text>
					</view>
					<text class="money">+200</text>
				 </view>
				 <view class="six">
					<view>
						<text>骑行行程上传，轨迹号8949594</text>
						<text>2018.12.02</text>
					</view>
					<text class="money">+100</text>
				 </view>
				</view>
		</view>
	</view>
		
	</view>
</template>

<script>
	 export default {
	                data() {
	                        return {
	                                Inv:0
	                        }
	                },
	                methods: {
	                        changeTab(Inv){
	                                that.navIdx = Inv;
	                                 
	                        },
	                }
	        }
	
</script>

<style lang="less" scoped>
	// 头部使用说明部分
	.header{
		display: flex;
	    justify-content: space-between;
		border-bottom: 1px solid #F2F2F2;
		.header_left{
			flex: 1;
		}
		.header_licheng{
		    flex: 1;
			margin: 10px 10px;
		    font-size: 18px;  text-align: center;
		}
		.header_use{
			flex: 1;
			text-align: right;
	        margin: 10px 10px;
		    font-size: 14px; 
		}
	}
	// 中部数据
	.content_top{
		display: flex;
		text{
			flex: 1;
		    padding: 10px 0;
			text-align: center;
			border-bottom: 1px solid #F2F2F2;
		}
	}
	.bottom{
		.one{
			display: flex;
			// justify-content: space-between;
            border-bottom: 1px solid #F2F2F2;
			padding: 10px 10px;
			view:first-child{
				display: flex;
				flex-direction: column;
			    flex: 3;
				text:first-child{
					
				}
			}
			.money{
				flex: 1;
				text-align: center;
			   }
		}	
		.two{
			display: flex;
			align-content: stretch;
			justify-content: space-between;
		    border-bottom: 1px solid #F2F2F2;
			padding: 10px 10px;
			view:first-child{
				display: flex;
				flex-direction: column;
			    flex: 3;
			}
			.money{
				flex: 1;
				text-align: center;
			}
			
		}
		.three{
			display: flex;
			align-content: stretch;
			justify-content: space-between;
	        border-bottom: 1px solid #F2F2F2;
			padding: 10px 10px;
			view:first-child{
				display: flex;
				flex-direction: column;
			    flex: 3;
			}
			.money{
				flex: 1;
				text-align: center;
			}
			
		}
	}
	.inv-h-w{
		background-color: #FFFFFF;height: 100upx;display: flex;
		}
	        
    .inv-h{
		font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;
		}
	.inv-h-se{
		color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;
		}

    .bot{
    	.four{
    		display: flex;
    		// justify-content: space-between;
    		align-content: stretch;
            border-bottom: 1px solid #F2F2F2;
    		padding: 10px 10px;
    		view:first-child{
				display: flex;
				flex-direction: column;
    		    flex: 3;
    		}
    		.money{
    			flex: 1;
    			text-align: center;
    		   }
    	}	
    	.five{
    		display: flex;
    		align-content: stretch;
    		justify-content: space-between;
    	    border-bottom: 1px solid #F2F2F2;
    		padding: 10px 10px;
    		view:first-child{
				display: flex;
				flex-direction: column;
    		    flex: 3;
    		}
    		.money{
    			flex: 1;
    			text-align: center;
    		}
    		
    	}
    	.six{
    		display: flex;
    		align-content: stretch;
            border-bottom: 1px solid #F2F2F2;
    		padding: 10px 10px;
    		view:first-child{
    		    flex: 3;
				display: flex;
				flex-direction: column;
    		}
    		.money{
    			flex: 1;
    			text-align: center;
    		}
    		
    	}
    }
</style>
